<template>
	<view class="appraise-content" :style="{direction:i18nLocale=='ug'?'rtl':''}">
		<scroll-view scroll-y="true" style="height:100%;width:100%;">
			<view class="title">{{$t('InteriorView')}}</view>
			<view class="shop-image" dir="ltr">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					:indicator-active-color="colortopic()" style="width:100%;height:100%">
					<swiper-item v-if="shopdata.banners" v-for="item in shopdata.banners"
						style="width:100%;height:100%;border-radius: 30rpx;">
						<view class="swiper-item">
							<image :src="getImgSrc(item)" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="title">
				<text>{{$t('ShopDocuments')}}</text>
			</view>
			<view class="image-box">
				<image v-for="item in shopdata.certs" :src="getImgSrc(item)" mode="widthFix"></image>
			</view>
			<view class="address">
				<text>{{$t('InteriorAddress')}}</text>
				<view class="address-content">
					{{i18nLocale=='ug'?shopdata.ug_address:shopdata.cn_address}}
				</view>
			</view>
			<view class="title">
				<text>{{$t('BusinessHours')}}</text>
				<view class="time">{{shopdata.work_time}}</view>
			</view>
			<view class="title">
				{{$t('ContactMerchant')}}
			</view>
			<Contact :shopdata="shopdata"></Contact>
		</scroll-view>
	</view>
</template>

<script>
	import Contact from "@/components/Contact.vue"
	export default {
		components: {
			Contact
		},
		props: ['shopdata'],
		data() {
			return {
				address: [{
					latitude: '39.459801',
					longitude: '76.009871',
					title: '',
					width: 50,
					height: 50,
					label: {
						content: '店铺',
						color: '#fff',
						bgColor: '#15c45b',
						textAlign: 'center',
						padding: 10,
						borderRadius: 10,
						x: -80,
						y: 0
					}
				}],
			};
		},
		mounted() {
			if (this.shopdata) {
				if (this.$i18n.locale == 'ug') {
					this.address[0].label.content = this.shopdata.ug_name
				} else {
					this.address[0].label.content = this.shopdata.cn_name
				}
			}

		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {

		}

	}
</script>

<style lang="scss" scoped>
	.appraise-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: $uni-bg-color-box;
		font-weight: 200;

		.shop-image {
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-top: 20rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

			}

			image {
				width: 100%;
				height: 100%;
				border-radius: $uni-border-radius-lg;
			}
		}

		.title {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx $uni-spacing-padding-sm;
			font-size: $uni-font-size-base;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time {
				color: $uni-text-color-grey;
			}
		}
		.image-box{
			width: 100%;
			display: flex;
			// justify-content: space-between;
			image{
				width:30%;
				margin:0rpx 10rpx;
				border-radius: 10rpx;
			}
		}
		.address {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			border-bottom: 2rpx solid $uni-border-color;

			text {
				padding: 0rpx 20rpx;
				font-size: $uni-font-size-base;
				white-space: nowrap;
			}


		}

		.address-content {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
			// font-size: 30rpx;
			padding: 0rpx 0rpx;
			box-sizing: border-box;

		}

		.map-content {
			width: 100%;
			height: 30vh;
			position: relative;
		}

		.map-marker {
			width: 44rpx;
			height: 62rpx;
			position: absolute;
			top: 15vh;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>